<template>
    <div >
        <div class="order-flag">
            <text :style="styles.containerFirstArg">{{orderNumber}}</text>
        </div>
        <div class="container" :style="{'border-color':'black','border-width': '2px',...styles.container}">
            <div
                    style="
        position: absolute;
        left: 0;
        border-radius: 40px;
        border-style: solid;
        width: 90px;
        border-color: black;
        border-width: 1px;
        transform: scale(0.9);
        justify-content: center;
        align-items: center;
        top: 5px;
        bottom: 5px;"
                    @click="getFirstArg">
                <text :style="styles.containerFirstArg">{{firstArg?firstArg.name:'1音'}}</text>
            </div>
            <div style="
        position: absolute;
        left: 80px;
        border-radius: 40px;
        border-style: solid;
        width: 90px;
        border-color: black;
        border-width: 1px;
        justify-content: center;
        transform: scale(0.9);
        align-items: center;
        top: 5px;
        bottom: 5px;" @click="getSecondArg">
                <text :style="styles.containerFirstArg">{{secondArg?secondArg.name:'2音'}}</text>
            </div>
            <div style="
        position: absolute;
        left: 160px;
        border-radius: 40px;
        border-style: solid;
        width: 90px;
        border-color: black;
        transform: scale(0.9);
        border-width: 1px;
        justify-content: center;
        align-items: center;
        top: 5px;
        bottom: 5px;" @click="getThirdArg">
                <text :style="styles.containerFirstArg">{{thirdArg?thirdArg.name:'3音'}}</text>
            </div>
            <div style="
        position: absolute;
        right: 0;
        border-radius: 40px;
        border-style: solid;
        width: 90px;
        transform: scale(0.9);
        border-color: black;
        border-width: 1px;
        justify-content: center;
        align-items: center;
        top: 5px;
        bottom: 5px;" @click="getFourthArg">
                <text :style="styles.containerFirstArg">{{fourthArg?fourthArg.name:'4音'}}</text>
            </div>
        </div>
        <image :style="styles.delBtn" class="container-del-btn" :src="img.delBtn" @click="handleDelete"></image>
    </div>
</template>

<script>
    import {getImagePath} from "../../../util/path-util";
    import {getMusicFlagByXYValue, getSameSoundKey, getSeventh} from "../../../util/compute";
    import {getFormatHeightPX, toast} from "../../../util/common";

    export default {
        name: "music-chord-seventh-input",
        props: {
            uuid: {
                type: String,
                default: ''
            },
            orderNumber: {
                type: String,
                default: '-1'
            }
        },
        data() {
            return {
                firstArg: null,
                secondArg: null,
                thirdArg: null,
                fourthArg: null,
                img: {
                    delBtn: getImagePath('delete')
                }, styles:{
                    container:{
                        height:getFormatHeightPX(60)
                    },
                    orderFlag:{
                    },
                    containerFirstArg: {
                        'font-size': getFormatHeightPX(26)
                    },
                    delBtn:{
                        height:getFormatHeightPX(55)
                    }
                }
            }
        },
        methods: {
            getFirstArg: function () {
                this.$emit('pushFirstArg', (firstArg, cb) => {
                    this.firstArg = getMusicFlagByXYValue(firstArg.xValue, firstArg.yValue);
                    let res = {
                        index: this.orderNumber,
                        first: this.firstArg,
                        second: this.secondArg,
                        third: this.thirdArg,
                        fourthArg: this.fourthArg,
                        uuid: this.uuid
                    }
                    if (this.isFinished()) {
                        res['result'] = getSeventh(this.firstArg,this.secondArg,this.thirdArg,this.fourthArg);
                        this.$emit('onFinish', res)
                        cb(res);
                    }
                })
            }, getSecondArg: function () {
                this.$emit('pushSecondArg', (secondArg, cb) => {
                    this.secondArg = getMusicFlagByXYValue(secondArg.xValue, secondArg.yValue);
                    let res = {
                        index: this.orderNumber,
                        first: this.firstArg,
                        second: this.secondArg,
                        third: this.thirdArg,
                        fourthArg: this.fourthArg,
                        uuid: this.uuid
                    }
                    if (this.isFinished()) {
                        res['result'] = getSeventh(this.firstArg,this.secondArg,this.thirdArg,this.fourthArg);
                        this.$emit('onFinish', res)
                        cb(res);
                    }
                })
            }, getThirdArg: function () {
                this.$emit('pushThirdArg', (thirdArg, cb) => {
                    this.thirdArg = getMusicFlagByXYValue(thirdArg.xValue, thirdArg.yValue);
                    let res = {
                        index: this.orderNumber,
                        first: this.firstArg,
                        second: this.secondArg,
                        third: this.thirdArg,
                        fourthArg: this.fourthArg,
                        uuid: this.uuid
                    }
                    if (this.isFinished()) {
                        res['result'] = getSeventh(this.firstArg,this.secondArg,this.thirdArg,this.fourthArg);
                        this.$emit('onFinish', res)
                        cb(res);
                    }
                })
            }, getFourthArg: function () {
                this.$emit('pushFourthArg', (fourthArg, cb) => {
                    this.fourthArg = getMusicFlagByXYValue(fourthArg.xValue, fourthArg.yValue);
                    let res = {
                        index: this.orderNumber,
                        first: this.firstArg,
                        second: this.secondArg,
                        third: this.thirdArg,
                        fourthArg: this.fourthArg,
                        uuid: this.uuid
                    }
                    if (this.isFinished()) {
                        res['result'] = getSeventh(this.firstArg,this.secondArg,this.thirdArg,this.fourthArg);
                        this.$emit('onFinish', res)
                        cb(res);
                    }
                })
            },
            isFinished() {
                return this.firstArg && this.secondArg && this.thirdArg && this.fourthArg
            },
            handleDelete() {
                this.$emit('onDelete');
            }
        }
    }
</script>

<style scoped>

    .container {
        margin-top: 10px;
        margin-bottom: 10px;
        align-self: center;
        width: 335px;
        margin-left: 15px;
        border-radius: 40px;
        border-style: solid;
        justify-content: center;
    }

    .order-flag {
        position: absolute;
        left: 10px;
        border-radius: 20px;
        border-style: solid;
        width: 50px;
        border-color: black;
        border-width: 1px;
        justify-content: center;
        align-items: center;
        top: 10px;
        bottom: 10px;
    }

    .container-del-btn {
        position: absolute;
        top: 14px;
        right: 5px;
        width: 50px;
    }
</style>
